<template>
  <div>
    <search-form
      class="searchTop border-shadow"
      :formModel="searchForm"
      :formList="dictionaryFormList"
    >
      <slot name="form-slot">
        <el-button
          type="primary"
          :size="btn_size"
          icon="el-icon-search"
          :id="tableParams.btnId"
        >搜索</el-button>
        <el-button
          type="primary"
          :size="btn_size"
          icon="el-icon-refresh"
        >重置</el-button>
      </slot>
    </search-form>
    <div class="table-btn">
      <el-button
        type="primary"
        :size="btn_size"
        icon="el-icon-plus"
        @click="handleClose"
      >新增</el-button>
    </div>
    <basic-table
      :tableParams="tableParams"
      :getListApi="getListApi"
      :searchForm="searchForm"
      :hasNum="false"
    >
      <span
        slot="status"
        slot-scope="scope"
      >
        <span class="dot green"></span><span class="statusText">正常</span>
      </span>
      <span
        slot="table-button"
        slot-scope="scope"
      >
        <el-button
          v-for="(j, idx) in tableParams.tableOption.btnList"
          :key="idx"
          :type="j.type"
          size="mini"
          plain
          @click="btnClick(j.pType, scope.scope)"
        >{{j.name}}</el-button>
      </span>
    </basic-table>
    <basic-dialog
      :title="dictionaryDialogTitle"
      :isVisible="dictionaryVisible"
      @confirmDialog="handleConfirm"
      @closeDialog="handleClose"
    >
      <slot>
        <rule-form
          :ruleForm="dictionaryForm"
          :rules="dictionaryRules"
          :ruleData="dictionaryData"
          ref='dictionaryForm'
        ></rule-form>
      </slot>
    </basic-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {},
      dictionaryFormList: [
        {
          type: 'input',
          inputType: 'text',
          prop: 'name',
          placeholder: '请输入字典名称'
        },
        {
          type: 'input',
          inputType: 'text',
          prop: 'type',
          placeholder: '请输入字典类型'
        },
        {
          type: 'select',
          prop: 'status',
          placeholder: '请选择字典状态',
          options: [
            {
              label: '正常',
              value: 1
            }, {
              label: '停用',
              value: 2
            }
          ]
        }
      ],
      tableParams: {
        mutiSelectName: 'dictionary',
        mutiSelectUniqueKey: 'id',
        btnId: new Date().getTime() + parseInt(Math.random() * 1000),
        listName: 'list',
        tableColumns: [
          {
            label: '字典主键',
            prop: 'id'
          }, {
            label: '字典名称',
            prop: 'dictName'
          }, {
            label: '字典类型',
            prop: 'dictType'
          }, {
            label: '字典备注',
            prop: 'remark'
          }, {
            label: '字典状态',
            prop: 'enableStatus',
            addHtml: 'status'
          }, {
            label: '创建时间',
            prop: 'createdDate'
          }
        ],
        tableOption: {
          width: 300,
          btnList: [
            {
              type: 'primary',
              name: '列表',
              pType: 'list'
            },
            {
              type: 'primary',
              name: '编辑',
              pType: 'edit'
            },
            {
              type: 'danger',
              name: '删除',
              pType: 'delete'
            }
          ]
        }
      },
      getListApi: null,
      // 弹窗
      dictionaryDialogTitle: '新增字典',
      dictionaryVisible: false,
      dictionaryForm: {},
      dictionaryData: [
        { label: '字典名称：', prop: 'dictName', type: 'input' },
        { label: '字典类型', prop: 'dictType', type: 'input' },
        { label: '状态', prop: 'enableStatus', type: 'switch' },
        { label: '备注', prop: 'remark', type: 'input', inputText: 'textarea' }
      ],
      dictionaryRules: {}
    }
  },
  methods: {
    // 按钮事件
    btnClick(pType, scope) {
      console.log(pType, scope)
      switch (pType) {
        case 'edit':
          this.handleClose(scope)
          break
        case 'delete':
          this.deleteEvent(scope.id)
          break
        case 'list':
          console.log('list')
          break
      }
    },
    // 确定
    handleConfirm() {
      console.log(this.$refs.dictionaryForm)
      this.$refs.dictionaryForm.$children[0].validate((valid) => {
        if (valid) {
          this.handleClose()
        } else {
          console.log('error')
        }
      })
    },
    // 取消
    handleClose(row) {
      console.log(row)
      if (!this.dictionaryVisible && this.$refs.dictionaryForm) {
        this.$refs.dictionaryForm.$children[0].resetFields()
      }
      this.dictionaryVisible = !this.dictionaryVisible
    },
    // 删除触发事件
    deleteEvent(id) {
      const that = this
      const tipData = {
        that: that,
        tipText: '是否删除当前记录',
        tipTitle: '提示',
        type: 'error',
        callBack: () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      }
      this.$Common.confirmDialog(tipData)
    }
  }
}
</script>